<template>
  <div :title="title" @back="() => $router.go(-1)">
    <a-spin :spinning="spinning">
      <div class="main">
        <div class="main-item">
          <a-descriptions :title="$t('all.autotext1286')"></a-descriptions>
          <div class="flow-wrap" :class="{'flow-hasleaf': flag}">
            <div class="flow">
              <div class="flow-main">{{ $t('all.autotext246') }}</div>
              <a-icon class="flow-icon" type="caret-right" />
              <div class="flow-item" v-for="(item, i) in flowNode" :key="i">
                <div class="flow-main" v-if="item.isMain">{{ item.roleName }}{{ $t('all.autotext1299') }}</div>
                <div class="flow-leaf" v-else>
                  <a-tooltip placement="topLeft">
                    <template slot="title">
                      {{ item.applyType }}
                    </template>
                    <div class="leaf-main"></div>
                    <div class="leaf-main-text">{{ item.applyType }}</div>
                  </a-tooltip>
                  <div class="leaf-no">{{ $t('all.autotext957') }}</div>
                  <div class="leaf-no leaf-yes">{{ $t('all.autotext279') }}</div>
                  <a-icon class="leaf-up" type="caret-up" />
                  <div class="leaf-branch">
                    <a-icon class="leaf-icon" type="caret-down" />
                    <div>{{ item.roleName }}{{ $t('all.autotext1299') }}</div>
                  </div>
                </div>
                <a-icon
                  class="flow-icon"
                  v-if="i!==flowNode.length-1 && offline==2 || offline==1"
                  :class="{'flow-icon-long': !item.isMain}"
                  type="caret-right"
                />
                <!-- <a-icon class="flow-icon" :class="{'flow-icon-long': !item.isMain}" type="caret-right"/> -->
              </div>
              <template v-if="offline==1">
                <div class="flow-main">{{ $t('all.autotext826') }}</div>
                <a-icon class="flow-icon" type="caret-right" />
                <div class="flow-main">{{ $t('all.autotext854') }}</div>
              </template>
            </div>
            <p v-if="offline==2" class="offline">{{ $t('all.autotext1531') }}</p>
          </div>
        </div>
        <div class="main-item">
          <a-descriptions :title="$t('all.autotext1153')"></a-descriptions>
          <a-row :gutter="16">
            <a-col :span="6" v-for="(item, i) in researchIds" :key="i">
              <div class="center">{{ item }}</div>
            </a-col>
          </a-row>
        </div>
        <div class="main-item">
          <a-descriptions :title="$t('all.autotext532')"></a-descriptions>
          <div class="ccflow">{{ ccflow }}</div>
        </div>
      </div>
    </a-spin>
  </div>
</template>
<script>
import { getFlowInfoById } from '@/api/overview/approval'
import cloneDeep from 'lodash.clonedeep'
export default {
  data () {
    return {
      spinning: true,
      flag: false,
      title: this.$route.query.type === '1' ? this.$t('all.autotext73.3') : this.$t('all.autotext73.4'),
      researchIds: [],
      ccflow: '',
      flowNode: [],
      offline: 1
    }
  },
  created () {
    const pd = localStorage.getItem('CURRENT_PROID')
    if (pd) {
      this.proId = parseInt(pd)
    }
    this.initData()
  },
  methods: {
    // 初始化数据
    async initData () {
      if (!this.$route.query.uid) return
      const res = await getFlowInfoById({
        id: this.$route.query.uid,
        proId: this.proId,
        type: this.$route.query.type
      })
      this.spinning = false
      this.title = res.flowName + this.title
      this.offline = res.offline
      this.researchIds = res.researchList.map(item => `${item.researchCenterNo} - ${item.orgName}`)
      this.ccflow = res.cc ? JSON.parse(res.cc).map(item => item.roleName).join(', ') : ''
      this.flowNode = []
      if (res.nodeList && res.nodeList.length) {
        let approverList = cloneDeep(res.nodeList)
        approverList = approverList.filter(v => v.nodeType !== 2)
        approverList.forEach(item => {
          if (item.parentCode) this.flag = true // 判断是否有分支节点
          item.isMain = !item.parentCode
          if (item.parentCode) {
            item.roleName = JSON.parse(item.roleName).map(item => item.roleName).join(', ')
          }
          this.flowNode.push(item)
        })
        console.log(this.flowNode)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.main {
  background: #fff;
  padding: 24px;
  .main-item {
    margin-bottom: 32px;
  }
  .center {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 20px 24px;
    border: 1px solid #E9EAEC;
    margin-bottom: 16px;
  }
}
.flow-wrap {
  width: 100%;
  min-height: 130px;
  overflow-x: auto;
  .offline{
    font-size: 18px;
    font-weight: bold;
    margin-top:20px;
  }
  .flow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 0;
    .flow-item {
      display: flex;
      align-items: center;
    }
    .flow-main {
      width: 120px;
      padding: 14px;
      text-align: center;
      border: 1px solid #031F47;
      color: #031F47;
      margin: 0 40px 0 0;
      word-break: break-all;
      flex-shrink: 0;
      flex-grow: 0;
    }
    .flow-leaf {
      padding-left: 30px;
      position:relative;
      .leaf-main {
        width: 82px;
        height: 70px;
        padding: 14px;
        border: 1px dashed #031F47;
        background: #F4F5F7;
        margin-right: 150px;
        transform: rotate(-30deg) skewX(30deg);
      }
      .leaf-main-text {
        width: 100px;
        text-align:center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position:absolute;
        top: 36%;
        left: 22px;
      }
      .leaf-no {
        width: 40px;
        height: 40px;
        border: 1px solid #F64C4C;
        border-radius: 50%;
        color: #F64C4C;
        text-align: center;
        line-height: 40px;
        background: #fff;
        position: absolute;
        top: 15px;
        right: 40px;
        z-index: 10;
      }
      .leaf-yes {
        color: #47B881;
        border: 1px solid #47B881;
        top: auto;
        right: auto;
        left: 50px;
        bottom: -90px;
      }
      .leaf-up {
        display: block;
        font-size: 12px;
        position:absolute;
        top: 36px;
        right:14px;
        &::after {
          content: '';
          display: block;
          width:1px;
          height: 180px;
          border-left: 1px solid #031F47;
          position: absolute;
          top: 8px;
          left: 50%;
        }
      }
      .leaf-branch {
        width: 140px;
        padding: 0 14px 14px;
        text-align: center;
        border: 1px solid #031F47;
        color: #031F47;
        word-break: break-all;
        position: absolute;
        left: 0;
        top: 200px;
        &::before {
          content: '';
          display: block;
          width: 104px;
          height: 1px;
          border-top: 1px solid #031F47;
          position: absolute;
          top: 50%;
          right: -104px;
        }
        &::after {
          content: '';
          display: block;
          width:1px;
          height: 50%;
          border-left: 1px solid #031F47;
          position: absolute;
          top: 0;
          right: -104px;
        }
        .leaf-icon {
          display: block;
          font-size: 12px;
          position:relative;
          top: -12px;
          &::before {
            content: '';
            display: block;
            width:1px;
            height: 120px;
            border-left: 1px solid #031F47;
            position: absolute;
            top: -112px;
            left: 50%;
          }
        }
      }
    }
    .flow-icon {
      display: block;
      font-size: 12px;
      position:relative;
      &::before {
        content: '';
        display: block;
        width:46px;
        height: 1px;
        border-top: 1px solid #031F47;
        position: absolute;
        top: 50%;
        left: -40px;
      }
    }
    .flow-icon-long {
      &::before {
        width:126px;
        left: -120px;
      }
    }
  }
}
.flow-hasleaf {
  min-height: 330px;
}
</style>
